<template>
	<div id="home">
		<!--<haders title="首页"> </haders>-->
		<scroller ref="scroller" :on-infinite="infinite">
			<div class="mian">
				<div class="information">
					<img class="bagbackg" src="../../../assets/clientele/homepage/timg.jpg" />
					<div class="plr20 shopName">
						<div class="leftName">
							<img :src="shopdata.Logo" alt="加载失败" :onerror="imgError" />
							<p>
								<span>店铺名称:{{shopdata.ShopName}}</span>
								<font>总销量:{{shopdata.TotalSale?shopdata.TotalSale:0}}</font>
							</p> 
						</div>
						<div class="rightName">
							<!--<a>分享</a>-->
							<a v-if="isShow==1" @click="addWishlist(shopdata)"><i class="icon-xuanzhong iconfont"></i>已关注</a>
							<a v-else  @click="addWishlist(shopdata)"><i class="icon-jia iconfont"></i>关注</a>
						</div>
					</div>
				</div>

				<div class="address p20">
					<i class="iconfont icon-zuobiao"></i>
					<span>{{shopdata.FullAddress}}</span>
					<a class="right_f" @click="phoneCall(shopdata)" ><i class="iconfont icon-kefu"></i>客服</a>
				</div>

				<div class="shopAll ">
					<p class="list_hader pud20"><i class="iconfont icon-guanli"></i><span>热门商品</span></p>
					<ul class="oul">
						<li class="list" v-for="item in items" :key="item.id">
							<div class="backglist" @click="spellslist(item)">
								<img :src="item.GoodsImg" alt="加载失败" :onerror="imgError">
							</div>
							<p class="aline2 p20 p_cole">{{item.GoodsName}}</p>
							<div class="listdiel plr20">
								<p class="ptext1"><span><font>￥{{item.CloudPrice}}</font></span><span>已拼:<font>{{item.ActorCount}}件</font></span></p>
								<p class="ptext2">
									<img v-for="lists  in  item.UserHeadUrl" :src="lists" />
									<a @click="spellslist(item)" class="box-show">去拼单</a>
								</p>
							</div>
						</li>
					</ul>

				</div>

			</div>
		</scroller>

		<footers></footers>
	</div>
</template>

<script>
	import footers from "@/components/other/footers"
	import Qs from 'qs';
	import { Toast } from 'mint-ui'; 
	import { Indicator } from 'mint-ui';
	export default {
		name: 'home',
		components: {
			footers
		},
		data() {
			return {
				indexPage: 1,
				items: [],
				shopdata: '',
				shopId: '', //店铺ID
				done:'',
				isShow:0//获取是否关注
			}
		},
		created() {
			this.imgError = this.$store.state.imgError;
		},
		mounted() {
			this.shopId=this.$route.params.ShopId; 
			this.pathname=window.location.pathname;
			this.getshopID();
		},
		methods: { 
			spellslist(item) {
				this.$router.push({
					path: '/clientele/goodsDetails/' + item.GoodsId
				})
			},
			//获取店铺信息
			getshopID(){
				Indicator.open("加载中...");
				let _this = this;
				this.initCom=false;
				this.$http.get("/GroupBuy/GetShop").then((res1) => {  
					console.log(res1);
					if(res1.data.code==1) {
						this.shopdata=res1.data.data;
						this.shopId=res1.data.data.ShopId;
						this.isShow=res1.data.data.IsCollection;
						this.WXstare();
						this.getlist();
					}else{ 
						Toast(res1.data.msg) 
					}
					Indicator.close();
				}).catch((err1) => {
					console.log(err1)
				});
			},
			//自动加载
			infinite(done) {
				this.done=done;
				if(this.initCom){
				  this.getlist(done) 
				 }
				 
			},
			//获取商品列表
			getlist(){ 
					this.$http.get("/GroupBuy/GetShopGoodsList", {
						params: { 
							"page": this.indexPage
						}
					}).then((res2) => {  
						if(res2.data.data.List.length==0) {
							this.done(true);
							this.initCom=true;
						}else{ 
							if(this.indexPage <= res2.data.data.TotalPage) {
								this.indexPage++;
								this.items = this.items.concat(res2.data.data.List);
								setTimeout(function() {
									this.initCom=true;
									this.done(); 
								}.bind(this), 3000);
							} else {
								this.done(true)
								this.initCom=true;
							}
						}
					}).catch((err2) => {
						console.log(err2)
					}); 
			},
			//收藏店铺
			addWishlist(Ids){ 
				let _this=this; 
				_this.$http.post('/GroupBuy/AddCollection', Qs.stringify({
						"type":1,
						"shopId":Ids.ShopId
				})).then((res) => {  
					if(res.data.code == 1){ 
						 _this.isShow=res.data.data;
						 if(_this.isShow==1){
						 	Toast("关注成功");
						 }else{
						 	Toast("取消成功");
						 }
					} else { 
						Toast(res.data.msg);
					}  
				}).catch((err) => {
					console.log(err);
				});	
			},
			//微信分享
			WXstare(){
				let param={
		            title: this.shopdata.ShopName, // 分享标题
		            desc:this.shopdata.FullAddress,// 分享描述
		            link: this.pathname+'?shopID='+this.shopdata.ShopId, // 分享链接
		            imgUrl:this.shopdata.Logo, // 分享图标
		            success: function (res) {
		              // 用户确认分享后执行的回调函数
		              window.alert("已经分享成功！")
		            },
		            cancel: function (res) {
		              // 用户取消分享后执行的回调函数
		               window.alert("分享失败！")
		            }
				} 
				this.wxShare(0,param);
			},
			phoneCall(mag){ 
				window.location.href = 'tel:'+mag.Phone
			}

		}
	}
</script>
<style scoped>
	.information {
		width: 100%;
		height: 4rem;
		text-align: center;
		position: relative;
	}
	
	.bagbackg {
		text-align: center;
		height: 100%;
	}
	
	.shopName {
		position: absolute;
		width: 100%;
		height: 1rem;
		bottom: 0.2rem;
		left: 0;
		display: flex;
		justify-content: space-between;
		font-size: 0.346666rem;
		color:#6530e0;
	}
	
	.shopName div {
		display: flex;
		justify-content: space-between;
	}
	
	.leftName img {
		width: 1rem;
		height: 1rem;
		border-radius: 100%;
		overflow: hidden;
	}
	
	.leftName p {
		margin-left: 0.2rem;
		font-weight: 700;
		float: left;
		text-align: left;
	}
	
	.leftName p span {
		display: block;
	}
	
	.rightName a {
		display: inline-table;
		padding: 0.1rem 0.1rem 0.1rem 0;
		/*height: 0.6rem;*/
		
		background-color: #FA8072;
		color: #fff;
		border-radius: 0.066666rem;
		margin-left: 0.3rem;
		margin-top: 0.2rem;
		background: linear-gradient(-92deg,#8900e0 0%, #1896e0 180%);
	}
	.rightName a i{
		font-size:0.373333rem;
	}
	.address {
		color: #999999;
		font-size: 0.346666rem;
		height:1.2rem;
		line-height: 0.7rem;
	}
	
	.address a {
		display: inline-block;
		padding: 0.1rem  0.2rem;
		background: #FA8072;
		color: #fff;
		border-radius: 0.066666rem;
		font-size: 0.356666rem;
		line-height: initial;
		background: linear-gradient(-92deg,#8900e0 0%, #1896e0 180%);
	}
	.address a i{
		margin-right:0.1rem;
	}
	.shopAll {
		width: 100%;
	}
	
	.list_hader {
		text-align: center;
		background-color: #fff;
	}
	
	.list_hader i {
		font-size: 0.5rem;
		color: #71B5F4;
	}
	
	.list_hader span {
		font-weight: 700;
		color: #FA8072;
		font-size: 0.48rem;
		margin-left: 0.2rem;
	}
	
	.oul {
		width: 100%;
	}
	
	.oul .list {
		width: 100%;
		margin-bottom: 0.3rem;
		background-color: #fff;
		padding: 0.2rem 0;
	}
	
	.backglist {
		width: 100%;
		text-align: center;
		/*height: 5rem;*/
	}
	
	.backglist img {
		width: 100%;
		height: 100%;
	}
	
	.p_cole {
		font-size: 0.346666rem;
		color: #666;
	}
	
	.listdiel {
		display: flex;
		justify-content: space-between;
	}
	
	.listdiel .ptext1 {
		font-size: 0.373333rem;
		color: #666;
	}
	
	.ptext1 span {
		margin-right: 0.5rem;
	}
	
	.ptext1 span font {
		color:#ff4141;
	}
	
	.ptext2 {
		position: relative;
	}
	
	.ptext2 a {
		display: inline-block;
		padding: 0.066666rem 0.2rem;
		color: #fff;
		background-color: #6530E0;
		border-radius: 0.066666rem;
		font-size: 0.373333rem;
		margin-left: 0.5rem;
		float: right;
	}
	
	.ptext2 img {
		width: 0.6rem;
		height: 0.6rem;
		border-radius: 100%;
		overflow: hidden;
		z-index: 10;
	}
	
	.ptext2 img:nth-child(2) {
		z-index: 15;
		margin-left: -0.2rem;
	}
</style>